<template>
  <div class="home">
    <van-search
        v-model="search"
        shape="round"
        background="darkcyan"
        placeholder="请输入搜索关键词"
    />

    <van-swipe height="200" class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item of banners" :key="item.id">
        <img :src="item.url" :alt="item.title">
      </van-swipe-item>
    </van-swipe>

    <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
    >
      <van-card
          v-for="item in posts"
          :desc="item.body"
          :title="item.title"
          thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
      />
    </van-list>
    <!-- <van-button @click="getPostsNextPage">加载更多</van-button>-->
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'HomeView',
  computed: {
    ...mapState('banner', ['banners']),
    ...mapState('posts', ['posts', 'finished']),
  },
  data() {
    return {
      search: '',
      loading: false
    }
  },
  created() {
    this.getBannersAction()

    //
    this.getPostsAction()
  },
  methods: {
    ...mapActions('banner', ['getBannersAction']),
    ...mapActions('posts', ['getPostsAction', 'getPostsNextPage']),
    onLoad() {
      this.getPostsNextPage().then(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped lang="stylus">
.my-swipe {
  img {
    width 100%
    height 100%
    object-fit cover
  }
}
</style>
